body, html {
  margin:0;
  padding:0;
  color:#000;
  background:#fff;
  font-size:14px;
  font-family:Verdana;
}





div#leftSide {
	position:fixed;
	width:245px;	
	left:0px;
	top:5px;
	background-color:#ddd;
	height:100%;
	z-index:25; /* important to make sure its z-index is greater than that of div#rightSide for good fixed scrolling */
}

		div.header {
			font-family: 'Amaranth', sans-serif;
			font-size: 18px;
			text-align:center;
			background-color:black;
			color:white;
			padding-top:2px;
			padding-bottom:2px;
		}
		

div#rightSide {
	position:absolute;
	left:250px;
	top:5px;
}







div#toolbar {
  position:relative;
  height:150px;
  //border-bottom:2px solid #000;
  margin-bottom:10px;
}
		
		div.blueBox {
		  display: block;
		  width: 50px;
		  height: 50px;
		  background: #4682B4;
		  cursor: move;
			border-color: #cccccc;
			border-width: 2;
			float: left;
			font-size: 46px;
			text-align: center;
			vertical-align: center;
			opacity:0.7;
		}
		
		div.blueBox:hover {
			cursor:pointer;
		}
		
		div#draggable_rect {
			position:absolute;
			left:32px;
			top:38px;
		}
		
		div#draggable_arc {
			position:absolute;
			left:97px;
			top:38px;
		}
		
		div#draggable_scatter {
			position:absolute;
			left:162px;
			top:38px;
		}
		
		div#draggable_axis {
			position:absolute;
			left:65px;
			top:98px;
		}
		
		div#draggable_text {
			position:absolute;
			left:130px;
			top:98px;
		}

g.selectedlabel{
	fill: orange;
	fill-opacity: .9;
}		

text.selectedlabel2{
	fill: red;
	fill-opacity: .9;
}		
		
		

div#sidebar {
  position:relative;
  //border-bottom:2px solid #000;
  margin-bottom:-5px;
}

		#data ul {
			position:relative;
		  list-style-type: none;
		  left:-8px;
			cursor: default;
		}
		
		#data ul li:hover {
			cursor:pointer;
		}

		/* What the list item looks like when it is dragged;
		   because it is cloned, inherits the same properties from normal li */
		li.ui-draggable-dragging.column{
			position:relative;
			color:white;
			opacity:0.6;
			z-index:25;
			background-color:red;
			width:150px;
			text-align:center;
		}

		
		
		
		
div#propertyEditor {
	position:relative;
}

		table {
			width:100%;
			position:relative;
		}
		
		table tr td:nth-child(1) {
			text-align:right;	
			padding-right:5px;
		}
		
		table tr td:nth-child(2) {
			text-align:left;	
		}
		
		td.propertyEditorHeader {
			width:120px;
			vertical-align:middle;
			font-size:12px;
			font-family:Verdana, Georgia, sans-serif;
		}
		
		td.propertyEditorWidget {
			text-align:center;
			//margin-bottom:15px;
		}	
		
		td.propertyEditorWidget input.colorInput {
			width:90%;
		}
		
		td.propertyEditorWidget div.pixelInput {
			width:90%;
		}
		
		td.propertyEditorWidget div.textInput {
			width:90%;
		}
		
		td.propertyEditorWidget div.buttonInput {
			width:90%;
		}
		
		td.propertyEditorWidget div.pixelInput input {
			width:50px;
		}
		
		td.propertyEditorWidget div.textInput input {
			width:75px;
		}
		
		td.propertyEditorWidget div.sliderInput input {
			width:100px;
		}
		
		td.propertyEditorWidget div.buttonInput button {
			width:29px;
		}

		tr.tempRow td {
			color:red;
		}
		

		

text:hover {
	cursor:move;
}


button.activeButton {
	background-color:#000;
	color:#fff;
}



table.legend {
	position:absolute;
	border:1px solid black;
	padding:4px;
	padding-top:0px;
	width:auto;
	cursor: move;
}
		table.legend tr td.title {
			font-size: 14px;
			text-align:center;
			font-weight: bold;
		}
	
		table.legend tr td {
			text-align: left;
		}
		
		table.legend tr td:nth-child(odd) {
			width:16px;
		}
		
		
		
		
		

div.menudivGroup {
	position:absolute;
	background-color:#cccccc;
	border:1px solid #999;
	box-shadow: 2px 2px 5px #666;
	width:120px;
	padding-left:2px;
	z-index:20; /* menu should always be above everything but the dragged mark */
}

		div.menudiv {
			height:25px;
		}
		
		div.submenudivGroup {
			position:absolute;
			background-color:#cccccc;
			border:1px solid #999;
			box-shadow: 2px 2px 5px #666;
			width:100px;
			padding-left:2px;
			left:118px;
			top:-1px;
		}

		div.optiondiv {
			height:20px;
			margin-bottom:18px;
			margin-top:18px;
		}
		
		div.menuArrow {
			position:relative;
			top:-18px;
			left:105px;
		}


		


div.note {
	padding:2px;
	border:1px solid #fff;
	background-color: #fff;
}

	





.zone{
  display: block;
  background: lightgreen;
	position: absolute;
	border-color: #cccccc;
	border-width: 2;
}

.vertzonehidden{
	display: none;
}

#axisdrag path,line {
	font-size: 10px;
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
	font-family: sans-serif;	
}

#axisdrag text {
	font-size: 8px;
	font-family: sans-serif;	
}

.axis {
	font-size: 14px;
}

.axis path,
.axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;	
}
.textanchor{
	background: orange;
  width: 50px;
  height: 15px;
  cursor: default;
	border-color: black;
	border-width: 2;
	text-align: center;
	vertical-align: center;
	opacity: .7;
	user-select: none;
	z-index:15; /* so that it shows up above other things except menu, tooltip, dragged out columns */

}





.mark-accept-highlight {
    background: green;

}

.closeicon{
  width: 15px;
  height: 15px;
  background: red;
  cursor: default;
	border-color: black;
	border-width: 2;
	text-align: center;
	vertical-align: center;
	opacity: .7;
	user-select: none;
}

		.closeicon:hover {
			cursor:pointer;
		}
		

.infoicon{
  width: 15px;
  height: 15px;
  background: cyan;
  cursor: default;
	border-color: black;
	border-width: 2;
	text-align: center;
	vertical-align: center;
	opacity: .7;
	user-select: none;
}

		.infoicon:hover {
			cursor:pointer;
		}	
		
		div.tooltip {
			z-index:50; /* should ALWAYS BE SEEN */
			background-color:black;
			color:white;
			font-size:12px;
			padding:2px;
		}
		
		
		
		
		

.menudiv{
	background: none;

}

.optiondiv{
	background: none;

}



#draggable_text{
	font-size: 46px;
	text-align: center;
	vertical-align: center;
}
#draggable_arc{
	font-size: 46px;
	text-align: center;
	vertical-align: center;
}

.hoverselected {
	color: black;
	background: khaki;
}


.optionselected {
	color: black;
	font-weight:bold;
}

.axisanchor {
	background: orange;
  width: 15px;
  height: 15px;
  cursor: default;
	border-color: black;
	border-width: 2;
	text-align: center;
	vertical-align: center;
	opacity: .7;
	user-select: none;
	z-index:15; /* so that it shows up above other things except menu, tooltip, dragged out columns */
}

.ui-state-disabled {
	opacity: 1;
}




